<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <view class="page">
    <view class="sticky top-0 z-10 bg-white pb-[20rpx]">
      <k-navbar :isMain="true" :bordered="false"></k-navbar>
      <view class="flex items-center px-4 mt-4">
        <wd-search
          v-model="state.keywrod"
          placeholder-left
          :hide-cancel="true"
          placeholder="请输入关键字"
          :focusWhenClear="true"
          custom-class="search"
          @search="handleSearch"
        />
        <wd-button :round="false" size="small" @click="handleSearch">搜索</wd-button>
      </view>
    </view>
    <view v-if="state.tabList.length">
      <segmented
        value-key="id"
        label-key="name"
        :options="state.tabList"
        v-model="state.curTab"
      ></segmented>
    </view>
    <view class="px-4">
      <wd-swiper
        value-key="cover"
        height="300rpx"
        img-mode="aspectFill"
        :list="state.swiperList"
        autoplay
        :indicator="{ type: 'dots-bar' }"
        customItemClass="rounded-sm"
        customClass="mt-4"
        @click="handleSwipeClick"
      ></wd-swiper>

      <business :list="state.businessList"></business>

      <filterMenu @changeSort="handleChangeSort" />
      <k-list :is-empty="!courseList.length" :loading="loading">
        <around
          :data="item"
          v-for="item in courseList"
          :key="item.id"
          @click="to(`pages-sub/product/product-detail?id=${item.id}`)"
        >
          <view class="mt-auto" v-if="userStore.isLogin">
            <discount-bar :price="item.member_price" :levelName="item.levelName" />
          </view>
        </around>
      </k-list>
    </view>

    <wd-popup
      v-model="showWelcomePopup"
      custom-style="width:90%;background-color:transparent"
      @click-modal="handleCloseWelcomePopup"
    >
      <registerTips @close="handleCloseWelcomePopup" />
    </wd-popup>
  </view>
</template>
<script setup>
import business from './components/business.vue'
import filterMenu from './components/filter-menu.vue'
import registerTips from './components/register-tips.vue'
import { to } from '@/utils/navigation'
import { fetchBannerList } from '@/service/index'
import { fetchCourseCategor, fetchCourseList } from '@/service/course'
import useReachBottomLoadMore from '@/hooks/useReachBottomLoadMore'
import useUserStore from '@/store/user'
import usePopup from '@/hooks/usePopup'

defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

const userStore = useUserStore()
const { show: showWelcomePopup, open: openWelcomePopup, close: closeWelcomePopup } = usePopup()

const state = ref({
  sort: {},
  keywrod: '',
  businessList: [
    {
      title: '商务合作',
      des: '立即开启合作之旅',
      bg: '/static/images/business_1.png',
      url: 'pages-sub/person/cooperation',
    },
    {
      title: '分销共赢',
      des: '立即开启合作之旅',
      bg: '/static/images/business_2.png',
      url: 'pages-sub/person/team',
    },
  ],
  curTab: 0,
  tabList: [],
  swiperList: [],
})

const requestParams = computed(() => {
  const { sort, curTab } = state.value
  return {
    ...sort,
    category_id: curTab,
  }
})

const {
  refresh,
  data: courseList,
  loading,
  params,
} = useReachBottomLoadMore(fetchCourseList, requestParams)

function handleSearch() {
  to(`pages-sub/product/search?keyword=${state.value.keywrod}`)
}

function handleChangeSort({ key, value }) {
  const sort = value == 1 ? 'asc' : 'desc'
  state.value.sort[key] = sort
  // refresh(state.value.sort)
}

function handleCloseWelcomePopup() {
  userStore.updateWelcomeConfig({
    ...userStore.welcomeConfig,
    showDialog: 0,
  })
  closeWelcomePopup()
}

function getCourseCategor() {
  fetchCourseCategor().then((res) => {
    state.value.tabList = res.data.lists
    if (state.value.tabList.length > 0) {
      state.value.curTab = state.value.tabList[0].id
    }
    uni.stopPullDownRefresh()
  })
}

function getBannerList() {
  fetchBannerList().then((res) => {
    state.value.swiperList = res.data.lists.map((item) => ({
      ...item,
      type: 'image',
    }))
  })
}

function handleSwipeClick({ i, item }) {
  if (item.link) to(item.link)
}

watch(
  () => userStore.welcomeConfig.showDialog,
  (v) => {
    v && openWelcomePopup()
  },
  {
    immediate: true,
  },
)

onPullDownRefresh(() => {
  getCourseCategor()
  getBannerList()
})

onLoad(() => {
  getCourseCategor()
  getBannerList()
})
onShow(() => {
  if (state.value.curTab) {
    refresh(params.value)
  }
})
</script>

<style lang="scss" scoped>
.page {
  --wot-search-input-bg: transparent;
  @apply pb-4;
}

::v-deep .search {
  @apply flex-1;
  padding: 0 !important;
  margin-right: 20rpx;
  border-radius: 4rpx;
  box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
}
</style>
